<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-24 22:18:34
 * @LastEditTime: 2019-11-05 14:55:10
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="blog-add">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="文章标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-radio-group v-model="form.category">
          <el-radio
            v-for="category in categories"
            :label="category.value"
            :key="category.value"
          >{{category.desc}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文章标签">
        <el-checkbox-group v-model="form.type">
          <el-checkbox
            v-for="type in types"
            :label="type.value"
            :name="type.desc"
            :key="type.value"
          >{{type.desc}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="定时发布">
        <el-switch v-model="form.isTime"></el-switch>
      </el-form-item>
      <el-form-item label="发布时间" v-if="form.isTime">
        <el-date-picker
          v-model="value2"
          type="datetime"
          placeholder="请选择发布时间"
          align="right"
          :picker-options="pickerOptions"
          style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="文章内容">
        <TuiEditor :data="content" ref="tuiEditor"></TuiEditor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">发布文章</el-button>
        <el-button>返回</el-button>
      </el-form-item>
    </el-form>

    <!-- <router-link to="/login">
    <el-button type="primary" @click="getTuiContent">发布文章</el-button>
    </router-link>-->
  </div>
</template>

<script>
import TuiEditor from "@c/TuiEditor";
export default {
  name: "blogAdd",
  data: () => {
    return {
      content: "",
      categories: [
        { value: "1", desc: "前端" },
        { value: "2", desc: "后端" },
        { value: "3", desc: "数据库" },
        { value: "4", desc: "随笔" },
        { value: "5", desc: "游记" },
        { value: "6", desc: "趣事" }
      ],
      types: [
        { value: "1", desc: "Nodejs" },
        { value: "2", desc: "JavaScript/TypeScirpt/ES6" },
        { value: "3", desc: "Html/Html5" },
        { value: "4", desc: "Css/Css3" },
        { value: "5", desc: "Vue" },
        { value: "6", desc: "React" },
        { value: "7", desc: "Angular" },
        { value: "8", desc: "Webpack/Gulp" },
        { value: "9", desc: "Linux" },
        { value: "10", desc: "Database" }
      ],
      form: {
        title: "",
        date: "",
        type: [],
        isTime: false,
        category: "",
        desc: ""
      }
    };
  },
  mounted() {},
  components: {
    TuiEditor
  },
  methods: {
    getTuiContent() {
      this.content = this.$refs.tuiEditor.getContent();
    },
    submit() {
      this.getTuiContent();
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
</style>